<template>
  <div class="bg">
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

<script setup>
import {nextTick } from 'vue';

import { Parser, Player, DB } from 'svga'
import svgaImg from '@/assets/loading/loading.svga?url'
let props = defineProps({
  // svgaImg: {
  //   type: String,
  //   required: true
  // },
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  }
})
const w = computed(() => props.width + 'px')
const h = computed(() => props.height + 'px')
const startSvga = async function () {
  try {
    const db = new DB()
    console.log(db, 'db');
    let svga = await db.find(svgaImg)
    console.log('svga',svga)
    if (!svga) {
      const parser = new Parser({ isDisableImageBitmapShim: true })
      svga = await parser.load(svgaImg)
      await db.insert(svgaImg, svga)
    }
    const doc = document.getElementById('canvas')
    const player = new Player(doc)
    await player.mount(svga)
    player.onStart = () => console.log('播放了')
    // 开始播放动画
    player.start()
  } catch (error) {
    console.error(error)
  }
}
nextTick(() => {
  startSvga()
})
</script>

<style scoped lang="scss">
.bg {
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}

.canvas {
  width: v-bind(w);
  height: v-bind(h);
}
</style>